<template>
    <div class="text-4xl">
        <div>
            Index的子页面 -> Home页面
        </div>
        <div class="text-6xl text-[#000]">
            这是一个极简的基础框架
        </div>

    </div>
    <div class="flex justify-center items-center text-xl mt-5">
        <el-button @click="reduceCount"> - </el-button>
        <div class="ml-5 mr-5">{{ store.count }}</div>
        <el-button @click="addCount"> + </el-button>
    </div>
    <el-button @click="test"> 测试网络请求 </el-button>
    <div class="mt-5">
        使用 axios 请求到的数据：{{ data }}
    </div>

    <div class="mt-5">
        {{ currentTime }}
    </div>

</template>

<script setup>

import { useStore } from '@/store/index'

import { testApi } from '@/api/index.api'

const { proxy } = getCurrentInstance()

const store = useStore()

const addCount = () => {
    store.increment()
}

const reduceCount = () => {
    store.count--
}

const data = ref('')

const test = async () => { 
    const res = await testApi()
    console.log(res)
    data.value = res
}

const currentTime = ref('')

setInterval(() => {
    currentTime.value = proxy.dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
}, 1000)

</script>
